<template>
    <div class="app-container" style="overflow-y: hidden;height: 86vh;">
        <el-form
            :model="queryParams"
            ref="queryForm"
            width="100%"
            label-width="80px"
        >
            <el-row>
                <el-col :span="6">
                    <el-form-item label="部门" prop="parentId">
                        <treeselect
                            v-model="queryParams.deptId"
                            :options="deptOptions"
                            :show-count="true"
                            @select="serviceClazzChenge"
                            placeholder="请输入服务名称"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="云服务商" prop="parentId">
                        <el-select v-model="queryParams.supplier" placeholder="请选择云服务商">
                            <el-option
                            v-for="item in logicListALL"
                            :key="item.cloudSupplier"
                            :label="item.cloudSupplierName"
                            :value="item.cloudSupplier">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="月份" prop="month">
                        <el-date-picker
                            v-model="queryParams.month"
                            type="month"
                            format="yyyy 年 MM 月"
                            value-format="yyyy-MM"
                            placeholder="选择月">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item style="margin-left: -30px">
                        <el-button
                            type="cyan"
                            icon="el-icon-search"
                            size="mini"
                            @click="handleQuery"
                            >搜索</el-button
                        >
                        <el-button
                            icon="el-icon-refresh"
                            size="mini"
                            @click="resetQuery"
                            >重置</el-button
                        >
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <!-- @row-click="rowClick" -->
        <!-- :header-cell-style = "tableHeaderStyle1" -->
        <div style="width: 100%;overflow-y: auto;overflow-x: auto;">
        <el-table
            :data="FirstLevelList"
            type="index"
            v-loading="loading"
            height="700"
            border
            :row-key="getRowKeys"
            :expand-row-keys="expands"
            @expand-change="expandSelect"
            :row-class-name="getRowClass"
            ref="refTable"
            stripe
            style="width: 100%;"
        >
        <!-- :header-cell-style = "tableHeaderStyle2"  . -->
            <el-table-column v-if="false" prop="" style="width: 100%;font-size : 12px;" fixed type="expand" label="下级">
                <template slot-scope="props" style="padding: 20px 30px;">
                    <el-table
                        :data="SecondaryList"
                        ref="refTables"
                        style="width: 100%;overflow-x: none;"
                    >
                        <el-table-column
                            width="96"
                            label="系统名称"
                            align="left"
                            prop="cloudUpName"
                        />
                        <el-table-column label="云服务器" align="center">
                            <el-table-column
                                align="right"
                                label="用量(台·月)"
                                prop="ecsNum"
                                width="90"
                            />
                            <el-table-column
                                align="center"
                                label="CPU"
                                prop="cpuNum"
                            >
                                <el-table-column
                                    align="right"
                                    label="用量(核·月)"
                                    prop="vcpu_used"
                                    width="100"
                                />
                                <el-table-column
                                    align="right"
                                    label="单价"
                                    prop="vcpu_price"
                                    width="140"
                                />
                                <el-table-column
                                    align="right"
                                    label="总价"
                                    prop="vcpu_total"
                                />
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="内存"
                                prop="memoryNum"
                            >
                                <el-table-column
                                    align="right"
                                    label="用量(GB·月)"
                                    prop="memory_used"
                                    width="100"
                                />
                                <el-table-column
                                    align="right"
                                    label="单价123"
                                    prop="memory_price"
                                />
                                <el-table-column
                                    align="right"
                                    label="总价"
                                    prop="memory_total"
                                />
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="高性能服务器" align="center">
                            <el-table-column
                                align="center"
                                label="高性能服务器1"
                                prop="bareMetalServerNum1"
                                style="font-size : 12px"
                            >
                                <el-table-column
                                    align="center"
                                    label="用量(台·月)"
                                    prop="ljswlfwq1_used"
                                    width="100"
                                />
                                <el-table-column
                                    align="center"
                                    label="单价"
                                    prop="ljswlfwq1_price"
                                />
                                <el-table-column
                                    align="center"
                                    label="总价"
                                    prop="ljswlfwq1_total"
                                />
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="高性能服务器2"
                                prop="bareMetalServerNum2"
                                style="font-size : 12px"
                            >
                                <el-table-column
                                    align="center"
                                    label="用量(台·月)"
                                    prop="ljswlfwq2_used"
                                    width="100"
                                />
                                <el-table-column
                                    align="center"
                                    label="单价"
                                    prop="ljswlfwq2_price"
                                />
                                <el-table-column
                                    align="center"
                                    label="总价"
                                    prop="ljswlfwq2_total"
                                />
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="高性能服务器3"
                                prop="bareMetalServerNum3"
                                style="font-size : 12px"
                            >
                                <el-table-column
                                    align="center"
                                    label="用量(台·月)"
                                    prop="ljswlfwq3_used"
                                    width="100"
                                />
                                <el-table-column
                                    align="center"
                                    label="单价"
                                    prop="ljswlfwq3_price"
                                />
                                <el-table-column
                                    align="center"
                                    label="总价"
                                    prop="ljswlfwq3_total"
                                />
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="高性能服务器4"
                                prop="bareMetalServerNum3"
                                style="font-size : 12px"
                            >
                                <el-table-column
                                    align="center"
                                    label="用量(台·月)"
                                    prop="ljswlfwq4_used"
                                    width="100"
                                />
                                <el-table-column
                                    align="center"
                                    label="单价"
                                    prop="ljswlfwq4_price"
                                />
                                <el-table-column
                                    align="center"
                                    label="总价"
                                    prop="ljswlfwq4_total"
                                />
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="高性能服务器5"
                                prop="bareMetalServerNum3"
                                style="font-size : 12px"
                            >
                                <el-table-column
                                    align="center"
                                    label="用量(台·月)"
                                    prop="ljswlfwq5_used"
                                    width="100"
                                />
                                <el-table-column
                                    align="center"
                                    label="单价"
                                    prop="ljswlfwq5_price"
                                />
                                <el-table-column
                                    align="center"
                                    label="总价"
                                    prop="ljswlfwq5_total"
                                />
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="操作系统" align="center">
                            <el-table-column
                                align="center"
                                label="Linux操作系统"
                                prop="distributedMemoryNum"
                                style="font-size : 12px"
                            >
                                <el-table-column
                                    align="center"
                                    label="用量(套·月)"
                                    prop="linuxczxt_used"
                                    width="100"
                                />
                                <el-table-column
                                    align="center"
                                    label="单价"
                                    prop="linuxczxt_price"
                                />
                                <el-table-column
                                    align="center"
                                    label="总价"
                                    prop="linuxczxt_total"
                                />
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="存储" align="center">
                            <el-table-column
                                align="center"
                                label="分布式存储、文件存储"
                                prop="distributedMemoryNum"
                                style="font-size : 12px"
                            >
                                <el-table-column
                                    align="center"
                                    label="用量(TB·月)"
                                    prop="fbscc_wjcc2_used"
                                    width="100"
                                />
                                <el-table-column
                                    align="center"
                                    label="单价"
                                    prop="fbscc_wjcc2_price"
                                />
                                <el-table-column
                                    align="center"
                                    label="总价"
                                    prop="fbscc_wjcc2_total"
                                />
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="FC存储(通用块存储)"
                                prop="generalMemoryNum"
                                style="font-size : 12px"
                            >
                                <el-table-column
                                    align="center"
                                    label="用量(TB·月)"
                                    prop="FCcc(tykcc)2_used"
                                    width="100"
                                />
                                <el-table-column
                                    align="center"
                                    label="单价"
                                    prop="FCcc(tykcc)2_price"
                                />
                                <el-table-column
                                    align="center"
                                    label="总价"
                                    prop="FCcc(tykcc)2_total"
                                />
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="FC存储(SSD块存储)"
                                prop="ssdmemoryNum"
                                style="font-size : 12px"
                            >
                                <el-table-column
                                    align="center"
                                    label="用量(TB·月)"
                                    prop="FCcc_ssd_used"
                                    width="100"
                                />
                                <el-table-column
                                    align="center"
                                    label="单价"
                                    prop="FCcc_ssd_price"
                                />
                                <el-table-column
                                    align="center"
                                    label="总价"
                                    prop="FCcc_ssd_total"
                                />
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="视频云存储"
                                prop="videoCloudMemoryNum"
                                style="font-size : 12px"
                            >
                                <el-table-column
                                    align="center"
                                    label="用量(TB·月)"
                                    prop="spycc2_used"
                                    width="100"
                                />
                                <el-table-column
                                    align="center"
                                    label="单价"
                                    prop="spycc2_price"
                                />
                                <el-table-column
                                    align="center"
                                    label="总价"
                                    prop="spycc2_total"
                                />
                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="应用安全" align="center">
                            <el-table-column
                                align="center"
                                label="虚拟web防火墙"
                                prop="distributedMemoryNum"
                                style="font-size : 12px"
                            >
                                <el-table-column
                                    align="center"
                                    label="用量(实例·月)"
                                    prop="xnwebfhq_used"
                                    width="100"
                                />
                                <el-table-column
                                    align="center"
                                    label="单价"
                                    prop="xnwebfhq_price"
                                />
                                <el-table-column
                                    align="center"
                                    label="总价"
                                    prop="xnwebfhq_total"
                                />
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="虚拟防火墙"
                                prop="distributedMemoryNum"
                                style="font-size : 12px"
                            >
                                <el-table-column
                                    align="center"
                                    label="用量(实例·月)"
                                    prop="xnfhq_used"
                                    width="100"
                                />
                                <el-table-column
                                    align="center"
                                    label="单价"
                                    prop="xnfhq_price"
                                />
                                <el-table-column
                                    align="center"
                                    label="总价"
                                    prop="xnfhq_total"
                                />
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="虚拟入侵防御"
                                prop="distributedMemoryNum"
                                style="font-size : 12px"
                            >
                                <el-table-column
                                    align="center"
                                    label="用量(实例·月)"
                                    prop="xnrqfx_used"
                                    width="100"
                                />
                                <el-table-column
                                    align="center"
                                    label="单价"
                                    prop="xnrqfx_price"
                                />
                                <el-table-column
                                    align="center"
                                    label="总价"
                                    prop="xnrqfx_total"
                                />
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="防病毒"
                                prop="distributedMemoryNum"
                                style="font-size : 12px"
                            >
                                <el-table-column
                                    align="center"
                                    label="用量(实例·月)"
                                    prop="fbd_used"
                                    width="100"
                                />
                                <el-table-column
                                    align="center"
                                    label="单价"
                                    prop="fbd_price"
                                />
                                <el-table-column
                                    align="center"
                                    label="总价"
                                    prop="fbd_total"
                                />
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="流量审计"
                                prop="distributedMemoryNum"
                                style="font-size : 12px"
                            >
                                <el-table-column
                                    align="center"
                                    label="用量(套·月)"
                                    prop="llsj_used"
                                    width="100"
                                />
                                <el-table-column
                                    align="center"
                                    label="单价"
                                    prop="llsj_price"
                                />
                                <el-table-column
                                    align="center"
                                    label="总价"
                                    prop="llsj_total"
                                />
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="日志审计"
                                prop="distributedMemoryNum"
                                style="font-size : 12px"
                            >
                                <el-table-column
                                    align="center"
                                    label="用量(套·月)"
                                    prop="rzsj_used"
                                    width="100"
                                />
                                <el-table-column
                                    align="center"
                                    label="单价"
                                    prop="rzsj_price"
                                />
                                <el-table-column
                                    align="center"
                                    label="总价"
                                    prop="rzsj_total"
                                />
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="数据库审计"
                                prop="distributedMemoryNum"
                                style="font-size : 12px"
                            >
                                <el-table-column
                                    align="center"
                                    label="用量(套·月)"
                                    prop="sjksj_used"
                                    width="100"
                                />
                                <el-table-column
                                    align="center"
                                    label="单价"
                                    prop="sjksj_price"
                                />
                                <el-table-column
                                    align="center"
                                    label="总价"
                                    prop="sjksj_total"
                                />
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="安全审计(云堡垒机)"
                                prop="distributedMemoryNum"
                                style="font-size : 12px"
                            >
                                <el-table-column
                                    align="center"
                                    label="用量(套·月)"
                                    prop="aqsj_yblj_used"
                                    width="100"
                                />
                                <el-table-column
                                    align="center"
                                    label="单价"
                                    prop="aqsj_yblj_price"
                                />
                                <el-table-column
                                    align="center"
                                    label="总价"
                                    prop="aqsj_yblj_total"
                                />
                            </el-table-column>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="高性能计算"
                            prop="cpuNum"
                        >
                            <el-table-column
                                align="center"
                                label="用量(核·月)"
                                prop="cpuNum"
                                width="100"
                            />
                            <el-table-column
                                align="center"
                                label="单价"
                                prop="cpuNum"
                            />
                            <el-table-column
                                align="center"
                                label="总价"
                                prop="cpuNum"
                            />
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="数据库"
                            prop="cpuNum"
                            width="100"
                        >
                            <el-table-column
                                align="center"
                                label="SQL Server"
                                prop="distributedMemoryNum"
                                style="font-size : 12px"
                            >
                                <el-table-column
                                    align="center"
                                    label="用量(套·月)"
                                    prop="sqlserver_used"
                                    width="100"
                                />
                                <el-table-column
                                    align="center"
                                    label="单价"
                                    prop="sqlserver_price"
                                />
                                <el-table-column
                                    align="center"
                                    label="总价"
                                    prop="sqlserver_total"
                                />
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="国产数据库"
                                prop="distributedMemoryNum"
                                style="font-size : 12px"
                            >
                                <el-table-column
                                    align="center"
                                    label="用量(套·月)"
                                    prop="cpuNum"
                                    width="100"
                                />
                                <el-table-column
                                    align="center"
                                    label="单价"
                                    prop="cpuNum"
                                />
                                <el-table-column
                                    align="center"
                                    label="总价"
                                    prop="cpuNum"
                                />
                            </el-table-column>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="设备托管"
                            prop="cpuNum"
                        >
                            <el-table-column
                                align="center"
                                label="U"
                                prop="cpuNum"
                            >
                                <el-table-column
                                    align="center"
                                    label="用量(U·月)"
                                    prop="cpuNum"
                                    width="100"
                                />
                                <el-table-column
                                    align="center"
                                    label="单价"
                                    prop="cpuNum"
                                />
                                <el-table-column
                                    align="center"
                                    label="总价"
                                    prop="cpuNum"
                                />
                            </el-table-column>
                            <el-table-column
                                align="center"
                                label="机柜"
                                prop="cpuNum"
                            >
                                <el-table-column
                                    align="center"
                                    label="用量(机柜·月)"
                                    prop="cpuNum"
                                    width="100"
                                />
                                <el-table-column
                                    align="center"
                                    label="单价"
                                    prop="cpuNum"
                                />
                                <el-table-column
                                    align="center"
                                    label="总价"
                                    prop="cpuNum"
                                />
                            </el-table-column>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="光纤链路租用"
                            prop="cpuNum"
                        >
                            <el-table-column
                                align="center"
                                label="用量(对·公里·月)"
                                prop="cpuNum"
                                width="140"
                            />
                            <el-table-column
                                align="center"
                                label="单价"
                                prop="cpuNum"
                            />
                            <el-table-column
                                align="center"
                                label="总价"
                                prop="cpuNum"
                            />
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="用户培训"
                            prop="cpuNum"
                        >
                            <el-table-column
                                align="center"
                                label="用量(次)"
                                prop="cpuNum"
                                width="100"
                            />
                            <el-table-column
                                align="center"
                                label="单价"
                                prop="cpuNum"
                            />
                            <el-table-column
                                align="center"
                                label="总价"
                                prop="cpuNum"
                            />
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="国产数据"
                            prop="cpuNum"
                            v-if="false"
                        >
                            <el-table-column
                                align="center"
                                label="用量(套·月)"
                                prop="cpuNum"
                                width="100"
                            />
                            <el-table-column
                                align="center"
                                label="单价"
                                prop="cpuNum"
                            />
                            <el-table-column
                                align="center"
                                label="总价"
                                prop="cpuNum"
                            />
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="合计"
                            prop="total_"
                        >

                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column style="background-color: red" label="部门名称" width="100" fixed align="center" prop="deptName" />
            <el-table-column
                align="center"
                label="系统数量"
                prop="cloudUpNum"
                width="90"
            />
            <el-table-column label="云服务器" align="center">

                <el-table-column
                    align="right"
                    label="用量(台·月)"
                    prop="ecsNum"
                    width="90"
                />
                <el-table-column
                    align="center"
                    label="CPU"
                    prop="cpuNum"
                >
                    <el-table-column
                        align="right"
                        label="用量(核·月)"
                        prop="vcpu_used"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价(￥)"
                        prop="vcpu_price"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="vcpu_total"
                    />
                </el-table-column>
                <el-table-column
                    align="center"
                    label="内存"
                    prop="memoryNum"
                >
                    <el-table-column
                        align="right"
                        label="用量(GB·月)"
                        prop="memory_used"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价(￥)"
                        prop="memory_price"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="memory_total"
                    />
                </el-table-column>
            </el-table-column>
            <el-table-column label="高性能服务器" align="center">
                <el-table-column
                    align="center"
                    label="高性能服务器1"
                    prop="bareMetalServerNum1"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="right"
                        label="用量(台·月)"
                        prop="ljswlfwq1_used"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价(￥)"
                        prop="ljswlfwq1_price"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="ljswlfwq1_total"
                    />
                </el-table-column>
                <el-table-column
                    align="center"
                    label="高性能服务器2"
                    prop="bareMetalServerNum2"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="right"
                        label="用量(台·月)"
                        prop="ljswlfwq2_used"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价(￥)"
                        prop="ljswlfwq2_price"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="ljswlfwq2_total"
                    />
                </el-table-column>
                <el-table-column
                    align="center"
                    label="高性能服务器3"
                    prop="bareMetalServerNum3"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="right"
                        label="用量(台·月)"
                        prop="ljswlfwq3_used"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价(￥)"
                        prop="ljswlfwq3_price"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="ljswlfwq3_total"
                    />
                </el-table-column>
                <el-table-column
                    align="center"
                    label="高性能服务器4"
                    prop="bareMetalServerNum3"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="right"
                        label="用量(台·月)"
                        prop="ljswlfwq4_used"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价(￥)"
                        prop="ljswlfwq4_price"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="ljswlfwq4_total"
                    />
                </el-table-column>
                <el-table-column
                    align="center"
                    label="高性能服务器5"
                    prop="bareMetalServerNum3"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="right"
                        label="用量(台·月)"
                        prop="ljswlfwq5_used"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价(￥)"
                        prop="ljswlfwq5_price"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="ljswlfwq5_total"
                    />
                </el-table-column>
            </el-table-column>
            <el-table-column label="操作系统" align="center">
                <el-table-column
                    align="center"
                    label="Linux操作系统"
                    prop="distributedMemoryNum"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="right"
                        label="用量(套·月)"
                        prop="linuxczxt_used"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价(￥)"
                        prop="linuxczxt_price"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="linuxczxt_total"
                    />
                </el-table-column>
            </el-table-column>
            <el-table-column label="存储" align="center">
                <el-table-column
                    align="center"
                    label="分布式存储、文件存储"
                    prop="distributedMemoryNum"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="right"
                        label="用量(TB·月)"
                        prop="fbscc_wjcc2_used"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价(￥)"
                        prop="fbscc_wjcc2_price"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="fbscc_wjcc2_total"
                    />
                </el-table-column>
                <el-table-column
                    align="center"
                    label="FC存储(通用块存储)"
                    prop="generalMemoryNum"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="right"
                        label="用量(TB·月)"
                        prop="FCcc(tykcc)2_used"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价(￥)"
                        prop="FCcc(tykcc)2_price"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="FCcc(tykcc)2_total"
                    />
                </el-table-column>
                <el-table-column
                    align="center"
                    label="FC存储(SSD块存储)"
                    prop="ssdmemoryNum"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="right"
                        label="用量(TB·月)"
                        prop="FCcc_ssd_used"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价"
                        prop="FCcc_ssd_price"
                        width="100(￥)"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="FCcc_ssd_total"
                    />
                </el-table-column>
                <el-table-column
                    align="center"
                    label="视频云存储"
                    prop="videoCloudMemoryNum"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="right"
                        label="用量(TB·月)"
                        prop="spycc2_used"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价(￥)"
                        prop="spycc2_price"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="spycc2_total"
                    />
                </el-table-column>
            </el-table-column>
            <el-table-column label="应用安全" align="center">
                <el-table-column
                    align="center"
                    label="虚拟web防火墙"
                    prop="distributedMemoryNum"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="right"
                        label="用量(实例·月)"
                        prop="xnwebfhq_used"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价(￥)"
                        prop="xnwebfhq_price"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="xnwebfhq_total"
                    />
                </el-table-column>
                <el-table-column
                    align="center"
                    label="虚拟防火墙"
                    prop="distributedMemoryNum"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="right"
                        label="用量(实例·月)"
                        prop="xnfhq_used"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价(￥)"
                        prop="xnfhq_price"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="xnfhq_total"
                    />
                </el-table-column>
                <el-table-column
                    align="center"
                    label="虚拟入侵防御"
                    prop="distributedMemoryNum"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="right"
                        label="用量(实例·月)"
                        prop="xnrqfx_used"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价(￥)"
                        prop="xnrqfx_price"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="xnrqfx_total"
                    />
                </el-table-column>
                <el-table-column
                    align="center"
                    label="防病毒"
                    prop="distributedMemoryNum"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="right"
                        label="用量(实例·月)"
                        prop="fbd_used"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价(￥)"
                        prop="fbd_price"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="fbd_total"
                    />
                </el-table-column>
                <el-table-column
                    align="center"
                    label="流量审计"
                    prop="distributedMemoryNum"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="right"
                        label="用量(套·月)"
                        prop="llsj_used"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价(￥)"
                        prop="llsj_price"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="llsj_total"
                    />
                </el-table-column>
                <el-table-column
                    align="center"
                    label="日志审计"
                    prop="distributedMemoryNum"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="right"
                        label="用量(套·月)"
                        prop="rzsj_used"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价(￥)"
                        prop="rzsj_price"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="rzsj_total"
                    />
                </el-table-column>
                <el-table-column
                    align="center"
                    label="数据库审计"
                    prop="distributedMemoryNum"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="right"
                        label="用量(套·月)"
                        prop="sjksj_used"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价(￥)"
                        prop="sjksj_price"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="sjksj_total"
                    />
                </el-table-column>
                <el-table-column
                    align="center"
                    label="安全审计(云堡垒机)"
                    prop="distributedMemoryNum"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="right"
                        label="用量(套·月)"
                        prop="aqsj_yblj_used"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价(￥)"
                        prop="aqsj_yblj_price"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="aqsj_yblj_total"
                    />
                </el-table-column>
            </el-table-column>
            <el-table-column
                align="center"
                label="高性能计算"
                prop="cpuNum"
            >
                <el-table-column
                    align="right"
                    label="用量(核·月)"
                    prop="cpuNum"
                    width="100"
                />
                <el-table-column
                    align="right"
                    label="单价(￥)"
                    prop="cpuNum"
                    width="100"
                />
                <el-table-column
                    align="right"
                    label="总价(￥)"
                    prop="cpuNum"
                />
            </el-table-column>
            <el-table-column
                align="center"
                label="数据库"
                prop="cpuNum"
                width="100"
            >
                <el-table-column
                    align="center"
                    label="SQL Server"
                    prop="distributedMemoryNum"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="right"
                        label="用量(套·月)"
                        prop="sqlserver_used"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价(￥)"
                        prop="sqlserver_price"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="sqlserver_total"
                    />
                </el-table-column>
                <el-table-column
                    align="center"
                    label="国产数据库"
                    prop="distributedMemoryNum"
                    style="font-size : 12px"
                >
                    <el-table-column
                        align="right"
                        label="用量(套·月)"
                        prop="cpuNum"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价(￥)"
                        prop="cpuNum"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="cpuNum"
                    />
                </el-table-column>
            </el-table-column>
            <el-table-column
                align="center"
                label="设备托管"
                prop="cpuNum"
            >
                <el-table-column
                    align="center"
                    label="U"
                    prop="cpuNum"
                >
                    <el-table-column
                        align="right"
                        label="用量(U·月)"
                        prop="cpuNum"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价(￥)"
                        prop="cpuNum"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="cpuNum"
                    />
                </el-table-column>
                <el-table-column
                    align="center"
                    label="机柜"
                    prop="cpuNum"
                >
                    <el-table-column
                        align="right"
                        label="用量(机柜·月)"
                        prop="cpuNum"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="单价(￥)"
                        prop="cpuNum"
                        width="100"
                    />
                    <el-table-column
                        align="right"
                        label="总价(￥)"
                        prop="cpuNum"
                    />
                </el-table-column>
            </el-table-column>
            <el-table-column
                align="center"
                label="光纤链路租用"
                prop="cpuNum"
            >
                <el-table-column
                    align="right"
                    label="用量(对·公里·月)"
                    prop="cpuNum"
                    width="140"
                />
                <el-table-column
                    align="right"
                    label="单价(￥)"
                    prop="cpuNum"
                    width="100"
                />
                <el-table-column
                    align="right"
                    label="总价(￥)"
                    prop="cpuNum"
                />
            </el-table-column>
            <el-table-column
                align="center"
                label="用户培训"
                prop="cpuNum"
            >
                <el-table-column
                    align="right"
                    label="用量(次)"
                    prop="cpuNum"
                    width="100"
                />
                <el-table-column
                    align="right"
                    label="单价(￥)"
                    prop="cpuNum"
                    width="100"
                />
                <el-table-column
                    align="right"
                    label="总价(￥)"
                    prop="cpuNum"
                />
            </el-table-column>
            <el-table-column
                align="center"
                label="国产数据"
                prop="cpuNum"
                v-if="false"
            >
                <el-table-column
                    align="right"
                    label="用量(套·月)"
                    prop="cpuNum"
                    width="100"
                />
                <el-table-column
                    align="right"
                    label="单价(￥)"
                    prop="cpuNum"
                    width="100"
                />
                <el-table-column
                    align="right"
                    label="总价(￥)"
                    prop="cpuNum"
                />
            </el-table-column>
            <el-table-column
                fixed="right"
                align="right"
                label="合计(￥)"
                prop="total_"
                width="120"
            >

            </el-table-column>
        </el-table>
        </div>
        <!-- <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="statementLists"
        /> -->
    </div>
</template>
<script>
import { statementList,statementByDept } from "@/api/reportForm/charging";
import { logicList } from "@/api/basic/services";
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    name: "CharGing",
    components: { Treeselect },
    data() {
        return {
            // 部门列表
            deptOptions: [],
            // 查询字段
            queryParams: {
                pageNum: 1,
                pageSize: 1000,
                month : "",
                supplier: '',
            },
            // 查询下级参数
            subqueryParams: {
                pageNum: 1,
                pageSize: 1000,
                deptId : null,
                month : "",
                supplier: '',
            },
            total : 0,
            getRowKeys(row) {
                return row.deptId;
            },
            // 一级数据列表
            FirstLevelList: [],
            // 二级数据列表
            SecondaryList: [],
            SecondaryListState : false,
            // 要展开的行，数值的元素是row的key值
            expands: [],
            logicListALL : [],
            loading: false
        };
    },
    created() {
        if(new Date().getMonth() + 1 > 9){
            this.queryParams.month = new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
        }else{
            this.queryParams.month = new Date().getFullYear() + '-0' + (new Date().getMonth() + 1)
        }
        logicList().then((res)=>{
            this.logicListALL = res.rows
            this.queryParams.supplier = res.rows[0].cloudSupplier
            this.statementLists()
        })
        treeselect().then((res) => {
            this.deptOptions = res.data;
        })
    },
    mounted(){
    },
    methods: {
        // 云服务商列表
        statementLists(){
            this.loading = true
            statementList(this.queryParams).then((res) => {
                this.FirstLevelList = res.rows;
                this.total = res.total
                this.loading = false
            });
        },
        /** 转换部门数据结构 */
        serviceClazzChenge(row) {
            this.queryParams.deptId = row.id
        },
        /** 转换部门数据结构 */
        serviceClazzChenges(row) {
            this.queryParams.deptId = row.id
        },
        rowClick(row, event, column , n = 0) {
            if(row.deptName == '合计'){
                this.$message({
                    message: '合计行没有下级',
                    type: 'warning'
                });
                return
            }
            this.subqueryParams.month = this.queryParams.month
            this.subqueryParams.supplier = this.queryParams.supplier
            this.subqueryParams.deptId = row.deptId
            statementByDept(this.subqueryParams).then(res=>{
                this.SecondaryList = res.rows
            })
            if( n == 0){
                this.$refs.refTable.toggleRowExpansion(row);
            }
        },
        getRowClass(row, rowIndex){
            if(row.row.deptName == '合计'){
                return 'row-expand-cover'
            }
        },
        expandSelect(row, expandedRows) {
            if(row.deptName == '合计'){
                this.$message({
                    message: '合计行没有下级',
                    type: 'warning'
                });
                return
            }
            // this.subqueryParams.month = this.queryParams.month
            // this.subqueryParams.supplier = this.queryParams.supplier
            // this.subqueryParams.deptId = row.id
            if(expandedRows.length > 1){
                this.SecondaryList = []
            }
            if (expandedRows.length) {
                this.expands = [];
                if (row) {
                    this.expands.push(row.deptId);
                    this.rowClick(row,{},{},2)
                }
            } else {
                this.expands = [];
                this.SecondaryList = []
            }
        },
        // // 表头颜色
        tableHeaderStyle1({row,column,rowIndex,columnIndex}){
            if(rowIndex == 0 || rowIndex == 1){
                return 'background: #4facfe;color: #fff;'
            }
        },
        // 表头颜色
        tableHeaderStyle2({row,column,rowIndex,columnIndex}){
            if(rowIndex == 0 || rowIndex == 1){
                return 'background: #00c6fb;color: #fff;'
            }
        },
        // 查询
        handleQuery() {
            this.statementLists()
        },
        // 重置
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                deptId : ''
            };
            this.statementLists()
        },
    },
};
</script>
<style lang="less" scoped>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .app-container{
        .row-expand-cover td:last-child .el-icon-arrow-right{visibility: hidden;}
    }
    /deep/ .el-table .row-expand-cover .cell .el-table__expand-icon {
        display: none;
    }
</style>
